<template>
  <!-- 创建团队的时候选择团队内的成员 -->
  <div class="member">
    <el-dialog title="成员管理" v-model="dialogTransfer" width="900px" append-to-body :close-on-click-modal="false"
      @close="closeDialogTransferClick">
      <div class="transferBox">
        <div class="transfer_left">
          <!-- 搜索 -->
          <div style="width:100%;">
            <div class="search_box">
              <el-input v-model="searchInput" style="width: 200px;" @keyup.enter.native="searchUserClick"
                placeholder="请输入名称"></el-input>
              <el-button :icon="Search" class="search_btn" @click="searchUserClick">搜索</el-button>
              <!-- 部门 -->
              <div ref="buttonRef" class="sort_box">
                <span>部门</span>
                <el-icon>
                  <ArrowDown />
                </el-icon>
              </div>
              <el-popover :virtual-ref="buttonRef" placement="bottom" width="auto" trigger="click">
                <div class="deptBox">
                  <el-tree ref="deptRefs" node-key="id" :data="deptDatas" :load="getDeptDatas" :props="defaultProps"
                    show-checkbox :expand-on-click-node="false" lazy @check-change="handleCheckChange">
                    <template v-slot="{ node }">
                      <span>{{ node.label }}</span>
                    </template>
                  </el-tree>
                </div>

              </el-popover>
            </div>
            <!-- 左边表格 -->
            <div>
              <el-table :data="teamPeopleList"  style="width:100%;" height="420"
                v-loading="teamPeopleLoading" @row-dblclick="teamPeopleRowDbClick">
                <el-table-column prop="nickName" label="昵称" width="250">
                  <template v-slot="scope">
                    <i class="el-icon-user-solid icon_size icon_user"></i>
                    <span>{{ scope.row.nickName }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="dept" label="部门" width="">
                  <template v-slot="scope">
                    <span v-if="scope.row.deptName">{{ scope.row.deptName }}</span>
                  </template>
                </el-table-column>
                <el-table-column width="">
                  <template v-slot="scope">
                    <!-- <i  class="el-icon-check" style="color:#1989fa"></i> -->
                    <el-icon v-show="scope.row.checked">
                      <Check />
                    </el-icon>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div style="margin-top: 5px;">
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="requestStr.page" :page-sizes="[10, 20, 30, 40]" :page-size="requestStr.size"
                layout="total,  prev, pager, next,sizes" :total="requestStr.total">
              </el-pagination>
            </div>
          </div>
        </div>
        <div class="transfer_center">
          <div>
            <el-button type="primary" size="small" :icon="DArrowRight" @click="allrightClick"></el-button>
          </div>
          <div>
            <el-button type="danger" size="small" :icon="Delete" @click="deleteTableClick"></el-button>
          </div>
        </div>
        <!-- 右边表格 -->
        <div class="transfer_right" style="">
          <el-table :data="rightUserList">
            <el-table-column prop="nickName" label="昵称">
              <template v-slot="scope">
                <span>
                  <i class="el-icon-user-solid icon_size icon_user"></i>
                  <span>{{ scope.row.nickName }}</span>
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="dept" label="部门" width="">
              <template v-slot="scope">
                <span v-if="scope.row.deptName">{{ scope.row.deptName }}</span>
              </template>
            </el-table-column>
            <el-table-column width="60">
              <template v-slot="scope">
                <div>
                  <el-tooltip class="item" effect="dark" content="删除" placement="top">
                    <!-- <i class="el-icon-close closeColor" @click="deptDeletePersonClick(scope.row)"></i> -->
                    <el-icon class="closeColor" @click="deptDeletePersonClick(scope.row)">
                      <Close />
                    </el-icon>
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div slot="footer" class="dialog-footer create_box">
        <el-button @click="closeDialogTransferClick">取 消</el-button>
        <el-button type="primary" @click="sureDialogTransferClick">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>



<script lang="ts" setup>
import { Delete, Search, DArrowRight } from "@element-plus/icons-vue"
import { apiSysResourceGetByDept, apiDeptQueryFreePerm } from "@/api/calendar/index"
// import { apiDeptQueryFreePerm } from "@/api/teamKnowdge/teamDocApi"
const dialogTransfer = ref(false)
const buttonRef = ref(null)
const teamPeopleList = ref([])
const TableKey = ref(false)
const teamPeopleLoading = ref(false)
const searchInput = ref("")
const rightUserList = ref([])
const requestStr = reactive({
  page: 1,
  size: 10,
  total: 0
})
const deptDatas = ref([])
const defaultProps = reactive({ children: "children", label: "deptName", isLeaf: "leaf" })
const deptIdArray = ref([])
const scheduleId = ref("")
const deptRefs = ref(null)
const emits = defineEmits(["confirmClick"])

// watch(rightUserList, (newValue) => {
//   TableKey.value = !TableKey.value
//   const idMap = new Map()
//   newValue.forEach((val) => {
//     idMap.set(val.id, true)
//   })
//   teamPeopleList.value.forEach((item) => {
//     item.checked = Boolean(idMap.get(item.id))
//   })
// })

const getTableData = (id) => {
  teamPeopleLoading.value = true
  scheduleId.value = id.toString()
  apiSysResourceGetByDept({
    page: requestStr.page - 1,
    size: requestStr.size,
    scheduleId: scheduleId.value,
    nickName: searchInput.value || " ",
    deptId: deptIdArray.value.join(",") || ' '
  })
    .then((res) => {
      rightUserList.value.forEach((val) => {
        const matchedItem = res.data.rows.find((item) => item.id === val.id)
        if (matchedItem) {
          matchedItem.checked = true
        }
      })
      teamPeopleList.value = res.data.rows
      requestStr.total = res.data.totalElements
      teamPeopleLoading.value = false
    })
    .catch((err) => {
      teamPeopleLoading.value = false
    })
}
/**搜索 */
const searchUserClick = () => {
  getTableData(scheduleId.value)
}

const teamPeopleRowDbClick = (row) => {
  if (rightUserList.value.findIndex((item) => item.id == row.id) == -1) {
    row.checked = true
    rightUserList.value.push(row)
  }
}
// 全部成员到右边
const allrightClick = () => {
  teamPeopleList.value.forEach((item) => {
    teamPeopleRowDbClick(item)
  })
}
//清空所有表格
const deleteTableClick = () => {
  ElMessageBox.confirm("此操作将删除全部用户, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      rightUserList.value = []
      teamPeopleList.value.forEach((item) => {
        item.checked = false
      })
    })
    .catch(() => { })
}
// 关闭成员穿梭框
const closeDialogTransferClick = () => {
  dialogTransfer.value = false
  rightUserList.value = []
  deptIdArray.value = []
  searchInput.value = ""
  requestStr.page = 1
  requestStr.size = 10
}

// 删除穿梭框右边成员
const deptDeletePersonClick = (val) => {
  rightUserList.value.forEach((item, index) => {
    if (item.id == val.id) {
      rightUserList.value.splice(index, 1)
      val.checked = false
    }
  })
}
// 确定按钮
const sureDialogTransferClick = () => {
  emits("confirmClick", rightUserList.value)
  closeDialogTransferClick()
}
//分页
const handleCurrentChange = (val) => {
  requestStr.page = val
  getTableData(scheduleId.value)
}
//每页
const handleSizeChange = (val) => {
  requestStr.size = val
  getTableData(scheduleId.value)
}
//  部门勾选
const handleCheckChange = () => {
  deptIdArray.value = deptRefs.value.getCheckedNodes().map((item) => item.deptId)
  requestStr.page = 1
  getTableData(scheduleId.value)
}
// 获取左侧部门数据
const getDeptDatas = (node, resolve) => {
  const sort = "id,desc"
  const params = { sort: sort }
  if (typeof node !== "object") {
    if (node) {
      params["name"] = node
    }
  } else if (node.level !== 0) {
    params["parentId"] = node.data.deptId
  }
  setTimeout(() => {
    apiDeptQueryFreePerm(params).then((res) => {
      res.data.forEach((item) => {
        // item.deptId = item.id;
        item.typeId = item.id
        item.perm = 0
      })
      if (resolve) {
        resolve(res.data)
      } else {
        deptDatas.value = res.data
      }
    })
  }, 100)
}

defineExpose({
  dialogTransfer,
  rightUserList,
  getTableData
})

</script>

<style lang="scss" scoped>
:deep(.el-dialog) {
  max-width: 900px !important;
  min-width: 790px !important;
}

:deep(.el-dialog__body) {
  padding: 0 20px 20px;
}

:deep(.el-tabs) {
  margin-bottom: 0;
}

.transferBox {
  display: flex;
  justify-content: space-between;

  .transferGloab {
    height: 500px;
    border: 1px solid #f1f1f1;
    overflow-y: auto;
    overflow-x: auto;
    padding: 6px;
  }

  .transfer_left {
    @extend .transferGloab;
    width: 480px;
    min-width: 480px;
  }

  .transfer_right {
    @extend .transferGloab;
    width: 320px;
    min-width: 320px;
  }

  .transfer_Right_perm {
    width: 100%;

    :deep(.el-input__inner) {
      border: 0px !important;
    }
  }

  .transfer_left {
    display: flex;
    justify-content: space-between;

    .left_left {
      width: 260px;
      height: 100%;
    }

    .left_right {
      height: 100%;
      width: 200px;
      min-width: 40%;
      border-left: 1px solid #f1f1f1;

      div {
        padding: 8px;
      }
    }
  }

  .transfer_right {
    // width: 30%;
    // min-width: 360px;
    // max-width: 55%;
  }

  .icon_size {
    font-size: 15px;
  }

  .icon_user {
    color: #36a3f7;
  }

  .transfer_center {
    height: 400px;
    padding-top: 150px;
    text-align: center;
    font-size: 26px;
    margin: 0 10px;
  }

  .closeColor {
    margin-top: 6px;
    font-size: 16px;
    cursor: pointer;
  }

  .closeColor:hover {
    color: #f56c6c;
  }
}

.create_box {
  text-align: right;
  margin-top: 10px;
}

.search_box {
  display: flex;
  align-items: center;

  .search_btn {
    margin-left: 5px;
  }
}

.deptBox {
  width: 100%;
  max-height: 310px;
  overflow: auto;
}

.sort_box {
  color: #999;
  font-size: 15px;
  cursor: pointer;
  border-radius: 4px;
  padding: 8px;
  transition: all 0.2s ease;
  margin-left: 5px;

  span {
    color: #666;
    font-size: 14px;
    margin-left: 5px;
  }

  &:hover {
    color: #6698ff !important;
    background: rgba(102, 152, 255, 0.1);

    span {
      color: #6698ff !important;
    }
  }
}
</style>
